<template>
  <div>
    <div class="modal">
      <div class="content">
        {{newData}}
        <label>名称：</label>
        <input type="text" v-model="newData.name"><br><br>
        <label>单价：</label>
        <input type="text" v-model="newData.price"><br><br>
        <label>数量：</label>
        <input type="text" v-model="newData.num"><br><br><br>
        <button @click="cancel">取消</button>
        <button @click="sure">确定</button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['info'],
  data() {
    return {
      newData: this.info
    }
  },
  // computed: {
  //   newData() {
  //     return this.info
  //   }
  // },
  methods: {
    // 子传父的事件监听
    cancel() {
      this.$emit('cancel');
    },
    // 子传父的事件监听
    sure() {
      this.$emit('sure', this.newData);
    }
  }
}
</script>
<style lang="">
  .modal {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    background-color: rgba(0,0,0,0.5);
  }
  .content {
    background-color: #fff;
    width: 300px;
    height: 150px;
    margin: 100px auto 0 auto;
    padding: 50px;
    border-radius: 6px;
  }
</style>
